<template>
	<div class="time flex justify-center items-center">
		<a-date-picker
			v-model="current"
			style="width: 360px"
			:disabledDate="(current) => isDisabledDate(current)"
			:day-start-of-week="1"
		/>
	</div>
</template>

<script setup>
import { ref, watch } from "vue";
import { storeToRefs } from "pinia";
import dayjs from "dayjs";
import { isHoliday } from "chinese-days";

import { useAppStore } from "@/stores";

const appStore = useAppStore();
const { getCurrent } = storeToRefs(appStore);

const current = ref("");

const isDisabledDate = (current) => {
	if (dayjs(current).isAfter(dayjs())) {
		return true;
	}

	if (isHoliday(current)) {
		return true;
	}

	// 此工作日为系统自动周末，不可能交易！
	if ([6, 0].includes(dayjs(current).day())) {
		return true;
	}

	return false;
};

watch(current, (val, oldVal) => {
	appStore.updateState({ current: val });
});

watch(
	getCurrent,
	(val, oldVal) => {
		current.value = val;
	},
	{ immediate: true }
);
</script>

<script>
export default {
	name: "CommonTime",
};
</script>

<style scoped lang="less">
.time {
}
</style>
